iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
自我挑戰組

30天開啟.NET後端工程師的旅程系列 第 19

Day19 使用.NET Core 建立簡單的CRUD (part 3 增加View & 資料增刪查改)

  • 分享至 

  • xImage
  •  

前言
在前兩天都有順利的連接到資料庫,連上以後再來就是可以做簡單的增刪查改,還有畫面顯示的部分


進行資料庫操作

既然建立好了,就可以使用Entity Framework Core進行資料庫操作了。

如何添加一篇新文章到資料庫呢??

首先新增一個控制器,在這裡可以透過EF新增一個Controller
https://ithelp.ithome.com.tw/upload/images/20231001/20151470Lue1huyAwU.png
這裡控制器命名是Article ,如果選擇使用Entity Framework執行檢視的MVC控制器這個的話,下面會自動生成可以增刪查改的。
https://ithelp.ithome.com.tw/upload/images/20231001/20151470R3IiF5bGeb.png
可以看到會自動勾選產生檢視,模型類別就選擇我們建立好的Models以及BlogDbContext
https://ithelp.ithome.com.tw/upload/images/20231001/20151470DALcHsPuh2.png
再來就可以看到在Controllers資料夾裡面出現了剛剛命名的控制器,還有Views資料夾多了Article資料夾,裡面就包含增刪查改
https://ithelp.ithome.com.tw/upload/images/20231001/20151470CKZTKlrbcV.png
然後可以在Layout的地方加上下面這段

<li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Article" asp-action="Index">查詢</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Article" asp-action="Create">新增</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Article" asp-action="Edit">編輯</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Article" asp-action="Delete">刪除</a>
                        </li>

畫面如下圖所示,這時候可以點擊這個按鈕
https://ithelp.ithome.com.tw/upload/images/20231001/20151470zRybOjpyF8.png
畫面上就會有HomePage,還有我們加上去的導覽列,如下圖顯示
https://ithelp.ithome.com.tw/upload/images/20231001/20151470Ykd2H7czdX.png
如果點擊新增就可以看到下圖,然後在網址列部分可以留意,看到Article那就是我們設定給這個Controller命名的名稱,後面則是這個檢視頁面的名稱,這裡設定是Create,所以在localhost後面輸入Controller/View就可以跳轉到你有設定的頁面了。

在這個Create頁面輸入下面相對應的內容之後。
https://ithelp.ithome.com.tw/upload/images/20231001/20151470R22PTdmvnG.png
就會來到這個查詢的頁面,也可以看到使用的是Article的Controller名稱,但後面沒有的原因,是因為預設就是Index的頁面了
https://ithelp.ithome.com.tw/upload/images/20231001/20151470gnI5IaZXqG.png
這時候我們也可以在SSMS查看(在Day提到的查詢語法),可以看到Select到剛剛新增的一筆出來。
https://ithelp.ithome.com.tw/upload/images/20231001/20151470GpPd1jyTLt.png
如果我再新增一筆,然後編輯內容也是可以的,點擊後面的Edit按鈕。
https://ithelp.ithome.com.tw/upload/images/20231001/20151470gLozkTn2Ls.png
Edit這裡,因為需要後面的Id編號,畢竟我們只編輯一筆,不是全部,所以如果直接參考Create的方式,從網址輸入Article/Edit就會產生錯誤訊息喔!像是下面這樣,所以後面要加上有的編號~
https://ithelp.ithome.com.tw/upload/images/20231001/20151470VWBr1Hh8PX.png
我把內容編輯修改一下,點擊Save。
https://ithelp.ithome.com.tw/upload/images/20231001/2015147004EmiZnFBx.png
可以看到首頁呈現出來的資料顯示,確實被更改了
https://ithelp.ithome.com.tw/upload/images/20231001/201514704GdeKn9aAv.png
使用SSMS確認查詢也查詢的到對的資料
https://ithelp.ithome.com.tw/upload/images/20231001/20151470Xuv0p0zqqE.png

然後可以試著把資料刪除,刪除跟編輯一樣,都是要有相對應的編號才可以刪除這一筆喔。
https://ithelp.ithome.com.tw/upload/images/20231001/20151470PkTAB5m9uz.png

總結

這樣基本上就是實作一個 MVC 架構,具資料庫基本操作功能的網站,其中包含連線至資料庫的 model、對其進行調用的 controller 以及顯示的 view。

這幾天都是使用Entity Framework Core進行資料庫操作,讓我們更輕鬆地管理和存取資料。通過定義數據模型、設置資料庫上下文、執行遷移和使用Entity Framework Core的LINQ查詢,我們可以有效地與數據庫交互。


第19天挑戰完成!!!!


上一篇
Day18 使用.NET Core 建立簡單的CRUD (part 2 資料庫建立完成)
下一篇
Day20 MVC 架構
系列文
30天開啟.NET後端工程師的旅程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言